<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head th:include="cultivateWeb/header :: culHeaderCss"></head>

<body>
<!-- 顶部导航 -->
<header th:include="cultivateWeb/header :: header"></header>
<link type="text/css" href="/css/cultivateWeb/style/course.css" rel="stylesheet">
<div style="background-color: #f7f7f7; ">
    <div class="layui-container">
        <p style="line-height: 40px">当前位置：<a href="/cultivate/homepage">首页</a> > <a href="/cultivate/study/studyOnline">在线学习</a> > 学习详情</p>
    </div>
    <section>
        <div>
            <p><img th:src="${cou.thumbnail}" class="img_1" id="courseImg"></p>
            <div class="div_1">
                <input type="hidden" id="courseId" th:value="${cou.id}"/>
                <input type="hidden" id="isTestScores" th:value="${isTestScores}"/>
                <span class="span_1" th:text="${cou.name}"></span>
                <!--            <span class="span_2">共<span style="color: red;">24</span>学时，<span style="color: red;">944</span>分钟</span>-->
                <span class="span_2">课程类型：
                    <span th:if="${cou.type==0}">证书课程</span>
                    <span th:if="${cou.type==1}">师资培训课程</span>
                    <span th:if="${cou.type==2}">考评员培训课程</span>
                    <span th:if="${cou.type==3}">高级师资培训课程</span>
                    <span th:if="${cou.type==4}">高级考评员培训课程</span>
                </span>
                <span class="span_2">讲师名：<span th:text="${cou.teacherName}"></span></span>
            </div>
            <div style="clear: both"></div>
        </div>
        <div class="div_2">
            <div style="height: 50px">
                <span class="span_3 active1">课程简介</span>
                <span class="span_3">视频课程</span>
                <span class="span_3">配套资源</span>
                <span class="span_3">章节练习</span>
                <span class="span_3">课程测试</span>
                <span class="span_3">课程问答</span>
            </div>
            <hr style="margin: auto"/>
            <!-- 课程简介 -->
            <div style="font-size: 14px;  margin: 30px;" id="introduce">
                <p style="font-size: 14px;" th:if="${not #strings.isEmpty(cou.introduce)}" th:text="${cou.introduce}"></p>
                <p style="font-size: 14px;" th:if="${#strings.isEmpty(cou.introduce)}">暂无数据</p>
            </div>
            <!-- 视频课程 -->
            <div style="font-size: 14px; margin:30px;display: none" id="chapterList">
            </div>
            <!-- 配套资源 -->
            <div style="font-size: 14px; margin:30px;display: none" id="extendList">
            </div>
            <!-- 章节练习 -->
            <div style="font-size: 14px; margin:30px;display: none" id="chapterText">
            </div>
            <!-- 课程测试 -->
            <div style="font-size: 14px; margin:30px;display: none" id="couText">
                <a style="float: left;margin-right: 10px" th:href="@{'/cultivate/study/studyExam?id='+${cou.id}+'&type=0&isTestScores='+${isTestScores}}" class="uc-ykt-course-card_btn">开始练习</a>
                <a style="float: left" th:if="${isTestScores!='1'}" th:href="@{'/cultivate/study/studyExam?id='+${cou.id}+'&type=1&isTestScores='+${isTestScores}}" class="uc-ykt-course-card_btn">开始测试</a>
                <a style="float: left" th:if="${isTestScores=='1'}" class="uc-ykt-course-card_btn_false">已完成测试,不可重复测试</a>
                <div style="clear: both"></div>
                <div style="color:red;font-size:16px;margin-top:20px">注意：练习时长和测试成绩会记录</div>
            </div>
            <div style="display: none" id="courseAndAsk">
                <div style="font-size: 14px; margin:30px;" id="setQuestion">
                    Q：
                    <span class="q_input"><textarea id="questions" class="form-control" style="max-width: 100%;min-width: 100%"></textarea></span>
                    <input type="button" onclick="send();" value="提交" class="form-control s_que" />
                </div>
                <div style="font-size: 14px; margin:30px;" id="courseAsk"></div>
                <div id="page" class="page"></div>
            </div>
        </div>
    </section>

    <div style="display: none;margin-top: 25px" id="coursePanel">
        <span class="q_Info">Q：<span id="ques"></span></span>
        <span class="q_Info">A：<span id="ans"></span></span>
    </div>

</div>

<!-- footer ------------------------------------------------------- -->
<div class="footer" th:include="cultivateWeb/header :: footer"></div>
</body>
<script type="text/javascript" src="/js/xlPaging.js"></script>
<script>
    $(function () {
        $(".span_3").click(function () {
            $(this).addClass("active1");
            $(this).siblings().removeClass("active1");
            if ($(this).text() == '课程简介') {
                $("#introduce").show();
                $("#chapterList").hide();
                $("#extendList").hide();
                $("#chapterText").hide();
                $("#couText").hide()
                $('#courseAndAsk').hide();
            }else if($(this).text() == '视频课程') {
                $("#introduce").hide();
                $("#chapterList").show();
                $("#extendList").hide();
                $("#chapterText").hide();
                $("#couText").hide()
                $('#courseAndAsk').hide();
            }else if($(this).text() == '配套资源') {
                $("#introduce").hide();
                $("#chapterList").hide();
                $("#extendList").show();
                $("#chapterText").hide();
                $("#couText").hide()
                $('#courseAndAsk').hide();
            }else if($(this).text() == '章节练习') {
                $("#introduce").hide();
                $("#chapterList").hide();
                $("#extendList").hide();
                $("#chapterText").show();
                $("#couText").hide()
                $('#courseAndAsk').hide();
            }  else if ($(this).text() == '课程测试'){
                $("#introduce").hide();
                $("#chapterList").hide();
                $("#extendList").hide();
                $("#chapterText").hide();
                $("#couText").show()
                $('#courseAndAsk').hide();
            }else {
                $("#introduce").hide();
                $("#chapterList").hide();
                $("#extendList").hide();
                $("#chapterText").hide();
                $("#couText").hide();
                $('#courseAndAsk').show();
            }
        });
        selChapterList();
        selExtendList();
        questions();
    });

    //获取配套资源列表
    function selExtendList() {
        $.ajax({
            url: "/jzApi/courses/selExtendList",
            type: 'GET',
            data: {id: $("#courseId").val()},
            success: function (res) {
                if (res.data == 0) {
                    $("#extendList").html('<div class="noData">暂无数据</div>');
                } else {
                    var list = res.data;
                    var categoryList = '';
                    list.forEach(function (item, index) {
                        var resourceList = item.resources;
                        
                        var resourceListStr='<div class="list"><span class="chapterTitle">'+item.name+'</span>';
                        var a = '';
                        if (item.isFree==0) {
                            a='<text style="color:#005c34">(可试看)</text>'
                        }
                        if(resourceList.length>0){
                            resourceList.forEach(function (item2,index2){
                                resourceListStr+='<div class="chapter"><a href="/cultivate/study/studyChapter?id=' + item2.id +'&chapterId='+item2.chapterId+ '&courseId=' + $("#courseId").val() + '">' +
                            '<div class="cpt"></div>' +
                            '<span class="cpt">' + item2.name +'</span class="cpt">' +
                            '<span class="min">' + a+ item2.videoDuration + '</span>' +
                            '<div style="clear: both"></div></a></div>';
                            });
                        }else{
                            resourceListStr+='<div class="chapter"><div class="noData">暂无数据</div></div>';
                        }
                        categoryList += resourceListStr+'</div>';
                        
                    });
                    $("#extendList").html(categoryList);
                }
            }
        });
    }
    // <!-- 课程章节 -->   <!-- 章节练习 -->
    function selChapterList() {
        $.ajax({
            url: "/jzApi/courses/selChapterList",
            type: 'GET',
            data: {id: $("#courseId").val()},
            success: function (res) {
                if (res.data == 0) {
                    $("#chapterList").html('<div class="noData">暂无数据</div>');
                } else {
                    var list = res.data;
                    var categoryList = '';//<!-- 课程章节 -->
                    var chapterText='';   //<!-- 章节练习 -->
                    var a='';
                    var b='';
                    list.forEach(function (item, index) {
                        if(item.isChaItem=='true'){
                            a='/cultivate/study/studyPractice?id='+item.id+'&courseId='+$("#courseId").val()+'&isTestScores='+$("#isTestScores").val();
                            b='进入练习'
                        }else{
                            a='javascript:void(0)';
                            b='暂无练习题'
                        }
                        var resourceList = item.resources;
                        var resourceListStr='<div class="list"><span class="chapterTitle">'+item.name+'</span>';
                        resourceList.forEach(function (item2,index2){
                            resourceListStr+='<div class="chapter"><a href="/cultivate/study/studyChapter?id=' + item2.id +'&chapterId='+item2.chapterId+ '&courseId=' + $("#courseId").val() + '">' +
                            '<div class="cpt"></div>' +
                            '<span class="cpt">' + item2.name +'</span class="cpt">' +
                            '<span class="min">' + item2.videoDuration + '</span>' +
                            '<div style="clear: both"></div></a></div>';
                        });
                        categoryList += resourceListStr+'</div>';

                        chapterText += '<div class="chapter"><a  href="'+a+'">' +
                            '<span class="cpt">' + item.name + '</span class="cpt">' +
                            '<span class="min" style="color:#005C34">'+b+'</span>' +
                            '<div style="clear: both"></div></a></div>';

                    });
                    $("#chapterList").html(categoryList);
                    $("#chapterText").html(chapterText);

                }
            }
        });
    }

    function questions() {
        ajaxToken("/jzApi/courses/selQuestions", "GET", {
            courseId:$("#courseId").val(),
            current:1,
            number:10
        }, function (r) {
            var list = r.records;
            var Q = '';
            var a = 1;
            list.forEach(function (item, index) {
                Q += '<div style="margin: 15px">' +
                     '  <span class="no">' + (a + index) + '、</span>' +
                     '  <span>Q：' +
                     '      <span class="q_a">' + item.contents + '</span>' +
                     '      <span class="seeAns" onclick="seeAns(\''+item.id+'\')">查看详情</span>'+
                     '      <spsan class="delQue" onclick="delQue(\''+item.id+'\')">删除</spsan>'+
                     '  </span>' +
                     '</div>'
            })
            $("#courseAsk").html(Q);
            page(1,r.pages);
        })
    }

    function page(num, tolPages) {
        $("#page").paging({
            nowPage: Number(num), // 当前页码
            pageNum: Number(tolPages), // 总页码
            buttonNum: 10, //要展示的页码数量
            canJump: 1,// 是否能跳转。0=不显示（默认），1=显示
            showOne: 0,//只有一页时，是否显示。0=不显示,1=显示（默认）
            callback: function (num) { //回调函数

                ajaxToken("/jzApi/courses/selQuestions", "GET", {
                    courseId: $("#courseId").val(),
                    current: num,
                    number: 10
                }, function (r) {
                    var list = r.records;
                    var Q = '';
                    var a = 1;
                    list.forEach(function (item, index) {
                        Q += '<div style="margin: 15px">' +
                             '  <span class="no">' + (a + index) + '、</span>' +
                             '  <span>Q：' +
                             '      <span class="q_a">' + item.contents + '</span>' +
                             '      <span class="seeAns" onclick="seeAns(\''+item.id+'\')">查看详情</span>'+
                             '      <spsan class="delQue" onclick="delQue(\''+item.id+'\')">删除</spsan>'+
                             '  </span>' +
                             '</div>'
                    })
                    $("#courseAsk").html(Q);
                })
            }
        })
    }

    function send() {
        ajaxToken("/jzApi/courses/addQuestions", "POST", {
            courseId: $("#courseId").val(),
            questions: $('#questions').val()
        }, function (r) {
            questions();
            $('#questions').val("")
            $('#courseAndAsk').show();
        })
    }

    function seeAns(id) {
        ajaxToken("/jzApi/courses/selQuestionsDetails", "GET", {id:id}, function (r) {

            var answers = r.answers;
            if(answers){
                $('#ans').html(r.answers);
            }else{
                $('#ans').html("");
            }
            $('#ques').html(r.questions);


            layer.open({
                type: 1,
                title: '问题详情',
                closeBtn: 1,
                area: [ '550px', '300px' ],
                shadeClose: true,
                offset: 'c',
                content: $('#coursePanel')
            });

        })
    }

    function delQue(id) {
        layer.confirm('确定要删除该问题吗？', {
            btn: ['确定', '取消']
        }, function () {
            ajaxToken("/jzApi/courses/delQuestions", "GET", {id:id}, function (r) {
                layer.closeAll();
                questions();
                $('#courseAndAsk').show();
            })
        })
    }

</script>
</html>